<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function $(id) {
     return document.getElementById(id)
    }
    let obj
    let objArray
    window.onload = function () {
     objArray = $('select1').getElementsByTagName("option")
      for (let i=0; i < objArray.length; i++) {
        objArray[i].onclick = function () {
          obj = objArray[i].value
          console.log(obj)
        }
      }
    }

    /***
     * 右移动
     */
    function rights() {
        let Obj = document.createElement('option')
        Obj.innerHTML = obj
        $('select2').appendChild(Obj)

    }

    /***
     * 右移动全部
     */
    function rightAll() {
      for (let i = 0; i < objArray.length; i++) {
        let trObj = document.createElement('option')
        trObj.innerHTML = objArray[i].value
        console.log(objArray[i].value)
        $('select2').appendChild(trObj)
      }
      var tdArray = $("select1").getElementsByTagName("option")
      for(let i=0;i<tdArray.length;i){
        tdArray[i].remove()
      }
    }
    /**
     * 左移动
     */
    function lefts() {

    }

    /***
     * 左移全部
     */
    function leftsAll() {
      for (let i = 0; i < objArray.length; i++) {
      let  trObj = objArray[i].value
        $('select1').value(trObj)
      }
      var tdArray = $("select2").getElementsByTagName("option")
      for(let i=0;i<tdArray.length;i){
        tdArray[i].remove()
      }
    }
  </script>
</head>
<body>
    <select style="width: 200px" multiple id="select1">
      <option>语文</option>
      <option>数学</option>
      <option>英语</option>
    </select>
    <input type="button" value=">" onclick="rights()">
    <input type="button" value=">>" onclick="rightAll()">
    <input type="button" value="<" onclick="lefts()">
    <input type="button" value="<<" onclick="leftsAll()">
    <select style="width: 200px" multiple id="select2">
    </select>
</body>
</html>
